<template>
  <div>
    <el-button type="primary" @click="drawer = true">新增</el-button>
    <el-button type="success">高级搜索</el-button>
    <span id="input-search">
      <el-input
        placeholder="请输入搜索内容"
        clearable
        v-model="searchVal"
        @keyup.enter.native="onSearch"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </span>
    <!--  -->
    <el-table :data="msbdList" border style="width: 100%">
      <el-table-column label="#" type="index" width="60"> </el-table-column>
      <el-table-column prop="title" label="标题"> </el-table-column>
      <el-table-column prop="type" label="分类" width="120"> </el-table-column>
      <el-table-column prop="author" label="作者" width="100">
      </el-table-column>
      <el-table-column prop="time" label="用时" width="100" sortable>
      </el-table-column>
      <el-table-column prop="date" label="发布时间" width="180" sortable>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <el-button size="mini" type="info" @click="onPreview(scope.row)"
            >详情</el-button
          >
          <el-button
            size="mini"
            type="warning"
            @click="editMsbdContent(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="removeMsbdList(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--  -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
    >
    </el-pagination>
    <!--  -->
    <el-drawer
      :title="title"
      :visible.sync="drawer"
      size="40%"
      :wrapperClosable="false"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="form.title" :disabled="preview"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select
            v-model="form.cid"
            placeholder="请选择"
            :disabled="preview"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="item in classifyList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用时">
          <el-select
            v-model="form.time"
            placeholder="请选择"
            :disabled="preview"
          >
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容">
          <mavonEditor
            style="max-height: 300px; overflow-y: scroll"
            v-model="form.content"
          ></mavonEditor>
        </el-form-item>
        <el-form-item v-if="!preview">
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="drawer = false">取消</el-button>
        </el-form-item>
        <el-form-item v-if="preview">
          <el-button @click="drawer = false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <!--  -->
  </div>
</template>

<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
import { mapState, mapActions } from "vuex";
export default {
  layout: "msbd",
  data() {
    return {
      searchVal: "",
      drawer: false,
      form: {},
      title: "知识点新增",
      preview: false,
      currentPage: 1,
    };
  },
  mounted() {
    this.getMsbdList();
  },
  methods: {
    ...mapActions("msbd", [
      "getMsbdList",
      "addMsbdList",
      "editMsbdListApi",
      "deleteMsbdList",
    ]),
    //
    onSearch() {
      this.getMsbdList({ searchVal: this.searchVal, currentPage: 0 });
    },
    //
    handleCurrentChange(val) {
      this.getMsbdList({ currentPage: val - 1 });
    },
    // 提交
    async onSubmit() {
      if (this.form.id) {
        await this.editMsbdListApi(this.form);
      } else {
        await this.addMsbdList(this.form);
      }
      this.drawer = false;
    },
    editMsbdContent(row) {
      this.title = "知识点修改";
      this.drawer = true;
      this.form = { ...row };
    },
    onPreview(row) {
      this.preview = true;
      this.title = "知识点预览";
      this.drawer = true;
      this.form = { ...row };
    },
    removeMsbdList(row) {
      this.$confirm("要删除该内容, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteMsbdList(row);
        })
        .catch(() => {});
    },
  },
  computed: {
    ...mapState("msbd", ["msbdList", "classifyList", "total"]),
  },
  components: {
    mavonEditor,
  },
  watch: {
    drawer(val) {
      if (val == false) {
        this.title = "知识点新增";
        this.form = {};
        this.preview = false;
      }
    },
  },
};
</script>

<style scoped>
.el-form {
  /* padding: 20px; */
}
</style>

<style>
#input-search .el-input {
  width: 300px;
  float: right;
  margin-bottom: 10px;
}
</style>